<template>
  <ul class="icon-demo">
    <li>
      <Add />
      <span>Add</span>
    </li>
    <li>
      <Addfollow />
      <span>Addfollow</span>
    </li>
    <li>
      <ArrowDown />
      <span>ArrowDown</span>
    </li>
    <li>
      <ArrowDown2 />
      <span>ArrowDown2</span>
    </li>
    <li>
      <ArrowRight />
      <span>ArrowRight</span>
    </li>
    <li>
      <ArrowRight2 />
      <span>ArrowRight2</span>
    </li>
    <li>
      <ArrowUp />
      <span>ArrowUp</span>
    </li>
    <li>
      <ArrowUp2 />
      <span>ArrowUp2</span>
    </li>
    <li>
      <Ask />
      <span>Ask</span>
    </li>
    <li>
      <Ask2 />
      <span>Ask2</span>
    </li>
    <li>
      <Cart />
      <span>Cart</span>
    </li>
    <li>
      <Cart2 />
      <span>Cart2</span>
    </li>
    <li>
      <Category />
      <span>Category</span>
    </li>
    <li>
      <CheckChecked />
      <span>CheckChecked</span>
    </li>
    <li>
      <CheckDisabled />
      <span>CheckDisabled</span>
    </li>
    <li>
      <CheckNormal />
      <span>CheckNormal</span>
    </li>
    <li>
      <Check />
      <span>Check</span>
    </li>
    <li>
      <Checked />
      <span>Checked</span>
    </li>
    <li>
      <Checklist />
      <span>Checklist</span>
    </li>
    <li>
      <CircleClose />
      <span>CircleClose</span>
    </li>
    <li>
      <Clock />
      <span>Clock</span>
    </li>
    <li>
      <CloseLittle />
      <span>CloseLittle</span>
    </li>
    <li>
      <Close />
      <span>Close</span>
    </li>
    <li>
      <Comment />
      <span>Comment</span>
    </li>
    <li>
      <Date />
      <span>Date</span>
    </li>
    <li>
      <Del />
      <span>Del</span>
    </li>
    <li>
      <Del2 />
      <span>Del2</span>
    </li>
    <li>
      <Dongdong />
      <span>Dongdong</span>
    </li>
    <li>
      <DouArrowUp />
      <span>DouArrowUp</span>
    </li>
    <li>
      <DownArrow />
      <span>DownArrow</span>
    </li>
    <li>
      <Download />
      <span>Download</span>
    </li>
    <li>
      <Dshop />
      <span>Dshop</span>
    </li>
    <li>
      <Edit />
      <span>Edit</span>
    </li>
    <li>
      <Eye />
      <span>Eye</span>
    </li>
    <li>
      <Fabulous />
      <span>Fabulous</span>
    </li>
    <li>
      <Failure />
      <span>Failure</span>
    </li>
    <li>
      <Find />
      <span>Find</span>
    </li>
    <li>
      <Follow />
      <span>Follow</span>
    </li>
    <li>
      <Footprint />
      <span>Footprint</span>
    </li>
    <li>
      <Github />
      <span>Github</span>
    </li>
    <li>
      <HeartFillN />
      <span>HeartFillN</span>
    </li>
    <li>
      <HeartFill />
      <span>HeartFill</span>
    </li>
    <li>
      <HeartFill1 />
      <span>HeartFill1</span>
    </li>
    <li>
      <HeartFill2 />
      <span>HeartFill2</span>
    </li>
    <li>
      <HeartFill3 />
      <span>HeartFill3</span>
    </li>
    <li>
      <HeartN />
      <span>HeartN</span>
    </li>
    <li>
      <Heart />
      <span>Heart</span>
    </li>
    <li>
      <Heart1 />
      <span>Heart1</span>
    </li>
    <li>
      <Heart2 />
      <span>Heart2</span>
    </li>
    <li>
      <Home />
      <span>Home</span>
    </li>
    <li>
      <HorizontalN />
      <span>HorizontalN</span>
    </li>
    <li>
      <Horizontal />
      <span>Horizontal</span>
    </li>
    <li>
      <ImageError />
      <span>ImageError</span>
    </li>
    <li>
      <Image />
      <span>Image</span>
    </li>
    <li>
      <Issue />
      <span>Issue</span>
    </li>
    <li>
      <Jd />
      <span>Jd</span>
    </li>
    <li>
      <Jdl />
      <span>Jdl</span>
    </li>
    <li>
      <Jimi40 />
      <span>Jimi40</span>
    </li>
    <li>
      <JoySmile />
      <span>JoySmile</span>
    </li>
    <li>
      <Left />
      <span>Left</span>
    </li>
    <li>
      <Link />
      <span>Link</span>
    </li>
    <li class="inside">
      <Loading name="loading" />
      <span>Loading</span>
    </li>
    <li>
      <Loading1 />
      <span>Loading1</span>
    </li>
    <li>
      <Location />
      <span>Location</span>
    </li>
    <li>
      <Location2 />
      <span>Location2</span>
    </li>
    <li>
      <Locationg3 />
      <span>Locationg3</span>
    </li>
    <li>
      <Lower />
      <span>Lower</span>
    </li>
    <li>
      <Marshalling />
      <span>Marshalling</span>
    </li>
    <li>
      <MaskClose />
      <span>MaskClose</span>
    </li>
    <li>
      <Message />
      <span>Message</span>
    </li>
    <li>
      <Microphone />
      <span>Microphone</span>
    </li>
    <li>
      <Minus />
      <span>Minus</span>
    </li>
    <li>
      <MoreS />
      <span>MoreS</span>
    </li>
    <li>
      <MoreX />
      <span>MoreX</span>
    </li>
    <li>
      <More />
      <span>More</span>
    </li>
    <li>
      <My />
      <span>My</span>
    </li>
    <li>
      <My2 />
      <span>My2</span>
    </li>
    <li>
      <Notice />
      <span>Notice</span>
    </li>
    <li>
      <Order />
      <span>Order</span>
    </li>
    <li>
      <People />
      <span>People</span>
    </li>
    <li>
      <Photograph />
      <span>Photograph</span>
    </li>
    <li>
      <PlayCircleFill />
      <span>PlayCircleFill</span>
    </li>
    <li>
      <PlayDoubleBack />
      <span>PlayDoubleBack</span>
    </li>
    <li>
      <PlayDoubleForward />
      <span>PlayDoubleForward</span>
    </li>
    <li>
      <PlayStart />
      <span>PlayStart</span>
    </li>
    <li>
      <PlayStop />
      <span>PlayStop</span>
    </li>
    <li>
      <Plus />
      <span>Plus</span>
    </li>
    <li>
      <PoweroffCircleFill />
      <span>PoweroffCircleFill</span>
    </li>
    <li>
      <RectDown />
      <span>RectDown</span>
    </li>
    <li>
      <RectLeft />
      <span>RectLeft</span>
    </li>
    <li>
      <RectRight />
      <span>RectRight</span>
    </li>
    <li>
      <RectUp />
      <span>RectUp</span>
    </li>
    <li>
      <Refresh />
      <span>Refresh</span>
    </li>
    <li>
      <Refresh2 />
      <span>Refresh2</span>
    </li>
    <li>
      <Retweet />
      <span>Retweet</span>
    </li>
    <li>
      <Right />
      <span>Right</span>
    </li>
    <li>
      <SFollow />
      <span>SFollow</span>
    </li>
    <li>
      <Scan />
      <span>Scan</span>
    </li>
    <li>
      <Scan2 />
      <span>Scan2</span>
    </li>
    <li>
      <ScreenLittle />
      <span>ScreenLittle</span>
    </li>
    <li>
      <Search />
      <span>Search</span>
    </li>
    <li>
      <Search2 />
      <span>Search2</span>
    </li>
    <li>
      <Service />
      <span>Service</span>
    </li>
    <li>
      <Setting />
      <span>Setting</span>
    </li>
    <li>
      <ShareN />
      <span>ShareN</span>
    </li>
    <li>
      <Share />
      <span>Share</span>
    </li>
    <li>
      <Share1 />
      <span>Share1</span>
    </li>
    <li>
      <Shop />
      <span>Shop</span>
    </li>
    <li>
      <Shop3 />
      <span>Shop3</span>
    </li>
    <li>
      <StarFillN />
      <span>StarFillN</span>
    </li>
    <li>
      <StarFill />
      <span>StarFill</span>
    </li>
    <li>
      <StarFill1 />
      <span>StarFill1</span>
    </li>
    <li>
      <StarFill2 />
      <span>StarFill2</span>
    </li>
    <li>
      <StarN />
      <span>StarN</span>
    </li>
    <li>
      <Star />
      <span>Star</span>
    </li>
    <li>
      <Star1 />
      <span>Star1</span>
    </li>
    <li>
      <Star11 />
      <span>Star11</span>
    </li>
    <li>
      <Star2 />
      <span>Star2</span>
    </li>
    <li>
      <Success />
      <span>Success</span>
    </li>
    <li>
      <Tips />
      <span>Tips</span>
    </li>
    <li>
      <Top />
      <span>Top</span>
    </li>
    <li>
      <TriangleDown />
      <span>TriangleDown</span>
    </li>
    <li>
      <TriangleUp />
      <span>TriangleUp</span>
    </li>
    <li>
      <Uploader />
      <span>Uploader</span>
    </li>
    <li>
      <Voice />
      <span>Voice</span>
    </li>
  </ul>
</template>
<script lang="ts" setup>
import {
  Add,
  Addfollow,
  ArrowDown,
  ArrowDown2,
  ArrowRight,
  ArrowRight2,
  ArrowUp,
  ArrowUp2,
  Ask,
  Ask2,
  Cart,
  Cart2,
  Category,
  CheckChecked,
  CheckDisabled,
  CheckNormal,
  Check,
  Checked,
  Checklist,
  CircleClose,
  Clock,
  CloseLittle,
  Close,
  Comment,
  Date,
  Del,
  Del2,
  Dongdong,
  DouArrowUp,
  DownArrow,
  Download,
  Dshop,
  Edit,
  Eye,
  Fabulous,
  Failure,
  Find,
  Follow,
  Footprint,
  Github,
  HeartFillN,
  HeartFill,
  HeartFill1,
  HeartFill2,
  HeartFill3,
  HeartN,
  Heart,
  Heart1,
  Heart2,
  Home,
  HorizontalN,
  Horizontal,
  ImageError,
  Image,
  Issue,
  Jd,
  Jdl,
  Jimi40,
  JoySmile,
  Left,
  Link,
  Loading,
  Loading1,
  Location,
  Location2,
  Locationg3,
  Lower,
  Marshalling,
  MaskClose,
  Message,
  Microphone,
  Minus,
  MoreS,
  MoreX,
  More,
  My,
  My2,
  Notice,
  Order,
  People,
  Photograph,
  PlayCircleFill,
  PlayDoubleBack,
  PlayDoubleForward,
  PlayStart,
  PlayStop,
  Plus,
  PoweroffCircleFill,
  RectDown,
  RectLeft,
  RectRight,
  RectUp,
  Refresh,
  Refresh2,
  Retweet,
  Right,
  SFollow,
  Scan,
  Scan2,
  ScreenLittle,
  Search,
  Search2,
  Service,
  Setting,
  ShareN,
  Share,
  Share1,
  Shop,
  Shop3,
  StarFillN,
  StarFill,
  StarFill1,
  StarFill2,
  StarN,
  Star,
  Star1,
  Star11,
  Star2,
  Success,
  Tips,
  Top,
  TriangleDown,
  TriangleUp,
  Uploader,
  Voice
} from '@nutui/icons-vue'
</script>
<style lang="scss">
.icon-demo {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #dcdfe6;
  border-left: 1px solid #dcdfe6;
  width: 901px;
  margin: 10px auto;
  li {
    &::before {
      content: none !important;
    }
    margin: 0 !important;
    padding: 0 !important;
    border-right: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
    height: 87px;
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    > span {
      font-size: 12px;
      line-height: 12px;
      margin-top: 10px;
    }
    > svg {
      height: 20px;
      width: 20px;
    }
  }
}
</style>
